<template>
    <div>
        <div class="mg-content">
            <el-row :gutter="20">
                <el-col :span="6">
                     <el-input v-model="input" size="mini" @keyup.enter.native="keyDown($event)" placeholder="请输入规格名称" :maxlength="20"></el-input>
                </el-col>
                <el-col :span="6">
                    <div  class="text-left">
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShow=true;activityId='';isUpdate=false;perentId='0/'">新增</el-button>
                    </div>
                </el-col>
            </el-row>
            <br>
            <div class="treeList" :span="4" style="margin-bottom:20px" >
                <el-card class="box-card" v-for="(item,index) in tableData" :key="index">
                    <div slot="header" class="clearfix">
                        <el-row>
                            <el-col class="text-left" :span="9">
                                <span>{{item.name}}</span>
                            </el-col>
                            <el-col :span="15" class="text-right">
                                <el-button style="padding: 3px 1px;" type="text" icon="el-icon-plus" @click="addCate(item)"></el-button>
                                <el-button style="padding: 3px 1px;" type="text" v-if="item.id!='0'" icon="el-icon-edit" @click="updateTreeItem('0/',item)"></el-button>
                                <el-button style="padding: 3px 1px;" type="text" v-if="item.id!='0'" icon="el-icon-minus" @click="delConfirm(index,delIndex,item.id)"></el-button>
                                <el-button style="padding: 3px 0" v-if="item.id=='0'" type="text">&nbsp;</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="card-list">
                        <div v-if="!item.children ||item.children.length<=0" style="background-color:#efefef;height:100%;" class="center-center">
                            <div style="border:1px dashed  #c0c0c0;padding:10px;cursor: pointer;">
                                暂无子级分类
                            </div>
                        </div>
                        <div v-for="(i,delIndex) in item.children" v-if="item.children && item.children.length>0" :key="i.id" class="text item">
                            <el-row>
                                <el-col :span="10" class="text-left">
                                    &nbsp;&nbsp;{{i.name}}
                                </el-col>
                                <el-col :span="14" class="text-right">
                                    <el-button style="padding: 3px 0;" type="text" v-if="item.id!='0'" icon="el-icon-edit" @click="updateTreeItem(item.id,i)"></el-button>
                                    <el-button style="padding: 3px 0;" type="text" v-if="item.id!='0'" icon="el-icon-minus" @click="delConfirm(index,delIndex,i.id)"></el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" :perentId="perentId" :isUpdate="isUpdate" @close="addClose" @addSuccess="addSuccess"></model>
         <PluginConfirm
                :show="dialogIsShow"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
import model from './model.vue'
import PluginConfirm from '@/components/PluginConfirm.vue'
export default{
    data(){
        return{
            loading:false,
            tableData: [],
            pageSizes:window.pageSizes,//所有可选择的条数
            pageSize:window.pageSize,//控制一页显示的条数
            total:10,//总条数
            input:"",
            currentPage:1,
            inputValue:"",
            addShow:false,
            activityId:"",
            perentId:"",
            isUpdate:false,
            selectItmeIndex:"",
            selectItemDetailsIndex:"",
            selectDelId:"",
            dialogIsShow:false,
        }
    },
    created(){
        window.this=this;
        this.initData()
    },
    components: {
        model,
         PluginConfirm
    },
    methods:{
        initData(){
            this.currentPage=1;
            this.getData();
        },
        keyDown(ev){
            if(ev.keyCode==13) {
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            }
        },
        search(){
            this.currentPage=1;
            this.inputValue=this.input;
            this.getData();
        },
        addCate(item){
            this.activityId=item.id;
            this.perentId=item.id+"/";
            this.isUpdate=false;
            this.addShow=true;
        },
        updateTreeItem(perId,item){
            this.activityId=item.id;
            this.perentId=perId;
            this.isUpdate=true;
            this.addShow=true;
        },
        getData(){
            this.$axios.get("materialCategorys?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue).then((data)=>{
                this.tableData=data.content.treeData;
            }).catch(function(err){
            })
        },
        addSuccess(item){
            this.addShow=false;
            this.initData();
        },
        addClose(){
            this.addShow=false;
        },
        delConfirm(index,delIndex,id){
            this.selectItmeIndex=index,
            this.selectItemDetailsIndex=delIndex;
            this.selectDelId=id;
            this.dialogIsShow=true;
        },
        /*用户选择提示框后处理*/
        dialogResult(param){
            this.dialogIsShow=param.close;
            if(param.choose==="ok"){
                //console.log("确定");
                this.$axios.delete("materialCategorys/"+this.selectDelId).then(data=>{
                    if(data.status==200){
                        this.tableData.splice(this.curDataIndex,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.message
                        });
                    }
                })
            }else if(param.choose==="cancel"){
                //console.log("取消");
            }else{
                //console.log("不做处理");
            }
        },
    }
}
</script>
<style scoped>

  .clearfix:before,
  .clearfix:after {
    display: table;

    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .card-list{
      height: 200px;
        background-color: #efefef;
      overflow-y: auto;
  }
  .card-list .text{
    padding: 10px 13px;
      background-color: #FFF;
      margin-bottom: 1px;
  }
 .treeList .box-card {
     float: left;
     width: 320px;
     margin-right: 10px;
     margin-bottom: 10px;
  }
  .treeList{
      float: left;
      background-color: #FFF;
  }
</style>
